<template>
  <div>
    <el-form ref="infoForm" :model="infoForm" label-width="160px" label-position="right">
      <div class="setting-box">
        <p class="setting-box-title">
          <span></span>平台基础设置
        </p>
        <div class="setting-box-body">
          <el-row>
            <el-col :span="12">
              <el-form-item label="学校名称:" prop="name" align="right">
                <el-input v-model="infoForm.name" placeholder="学校名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学校网址:" prop="url">
                <el-input v-model="infoForm.url" placeholder="学校网址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="小森林地图ID:" prop="map_id">
                <el-input v-model="infoForm.map_id" placeholder="小森林地图ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开启收集身高体重:">
                <el-switch v-model="infoForm.is_height" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通讯器地址:" prop="face_ip">
                <el-input v-model="infoForm.face_ip" placeholder="通讯器地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家长考勤:">
                <el-switch v-model="infoForm.is_parent" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="家长照片展示:">
                <el-switch v-model="infoForm.is_show_pick" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="发育设备更新:" prop="facility_ip">-->
            <!--                <el-input v-model="infoForm.facility_ip" placeholder="发育设备更新"></el-input>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
          </el-row>
        </div>
      </div>
      <div class="setting-box">
        <p class="setting-box-title">
          <span></span>楼层视频设备
        </p>
        <div class="setting-box-body">
          <el-row>
            <el-col :span="12">
              <el-form-item label="流媒体地址:" prop="video_url" align="right">
                <el-input v-model="infoForm.video_url" placeholder="http://录像机地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="流媒体端口:" prop="video_port" align="right">
                <el-input v-model="infoForm.video_port" placeholder="录像机端口"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="巡更设备地址:" prop="keep_url" align="right">
                <el-input v-model="infoForm.keep_url" placeholder="http://巡更设备地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="巡更设备地址端口:" prop="keep_url" align="right">
                <el-input v-model="infoForm.keep_port" placeholder="巡更设备地址端口地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- <div class="setting-box" v-if="userInfo.id==1||userInfo.is_all==1">-->
      <!--   <p class="setting-box-title"><span></span>百度信息用于用户端，家长签字识别</p>-->
      <!--   <div class="setting-box-body">-->
      <!--     <el-row>-->
      <!--       <el-col :span="12">-->
      <!--         <el-form-item label="百度图片识别appid:" prop="baidu_appid">-->
      <!--           <el-input v-model="infoForm.baidu_appid" placeholder="填写百度图片识别appid"></el-input>-->
      <!--         </el-form-item>-->
      <!--       </el-col>-->
      <!--       <el-col :span="12">-->
      <!--         <el-form-item label="百度图片识别key:" prop="baidu_key">-->
      <!--           <el-input v-model="infoForm.baidu_key" placeholder="填写百度图片识别key"></el-input>-->
      <!--         </el-form-item>-->
      <!--       </el-col>-->
      <!--       <el-col :span="12">-->
      <!--         <el-form-item label="百度图片识别secret:" prop="baidu_secret">-->
      <!--           <el-input v-model="infoForm.baidu_secret" placeholder="填写百度图片识别secret"></el-input>-->
      <!--         </el-form-item>-->
      <!--       </el-col>-->
      <!--     </el-row>-->
      <!--   </div>-->
      <!-- </div>-->
      <div class="setting-box">
        <div class="setting-box-body">
          <el-button type="primary" @click="onSubmit" size="small">保存</el-button>
          <el-button icon="el-icon-switch-button" size="small" @click="backloginUser">退出登入</el-button>
        </div>
      </div>
    </el-form>
    <div class="height40"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  components: {},
  data() {
    return {
      infoForm: {
        name: "",
        url: "",
        baidu_appid: "",
        baidu_key: "",
        baidu_secret: "",
        map_id: "",
        is_height: 0,
        video_url: "",
        face_ip: "",
        facility_ip: "",
        video_port: "",
        keep_url: "",
        is_parent: 0, // 0 关闭 1 开启
        is_show_pick: 0,
        keep_port: ''
      },
      rules: {
        name: [{ required: true, message: "填写学校名称", trigger: "blur" }],
        url: [{ required: true, message: "填写学校网址", trigger: "blur" }],
        video_url: [
          { required: true, message: "填写视频设备IP", trigger: "blur" },
        ],
        baidu_appid: [
          { required: true, message: "填写百度图片识别appid", trigger: "blur" },
        ],
        baidu_key: [
          { required: true, message: "填写百度图片识别key", trigger: "blur" },
        ],
        baidu_secret: [
          { required: true, message: "填写baidu_secret", trigger: "blur" },
        ],
      },
      setIp: "---",
      dialogIPVisible: false,
      dialogtype: 2,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    console.log("userInfo:", this.userInfo);
    this.InitFn();
  },
  methods: {
    InitFn() {
      this.$fetch(this.api.system_setting, {}).then((res) => {
        if (res.code === 0) {
          this.infoForm.name = res.vo.name;
          this.infoForm.url = res.vo.url;
          this.infoForm.baidu_appid = res.vo.baidu_appid;
          this.infoForm.baidu_key = res.vo.baidu_key;
          this.infoForm.baidu_secret = res.vo.baidu_secret;
          this.infoForm.map_id = res.vo.map_id;
          this.infoForm.video_url = res.vo.video_url;
          this.infoForm.keep_url = res.vo.keep_url;
          this.infoForm.keep_port = res.vo.keep_port
          this.infoForm.video_port = res.vo.video_port || "";
          this.infoForm.face_ip = res.vo.face_ip;
          this.infoForm.facility_ip = res.vo.facility_ip;
          this.infoForm.is_height = res.vo.is_height ? true : false;
          this.infoForm.is_parent = res.vo.is_parent ? true : false;
          this.infoForm.is_show_pick = res.vo.is_show_pick ? true : false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    onSubmit() {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      this.$refs["infoForm"].validate((valid) => {
        if (valid) {
          let data_ = JSON.parse(JSON.stringify(this.infoForm));
          data_.is_parent = data_.is_parent ? 1 : 0;
          data_.is_height = data_.is_height ? 1 : 0;
          data_.is_show_pick = data_.is_show_pick ? 1 : 0;
          this.$post(this.api.system_setting, data_).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: "设置成功",
                type: "success",
              });
              this.getFaceFn();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
    // 通讯器链接
    async getFaceFn() {
      // if(this.infoForm.face_ip){
      //   let data = await this.axios.get(this.infoForm.face_ip, {});
      //   console.log(data)
      // }
    },
    backloginUser() {
      this.$confirm("确认退出当前登入账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/login");
        })
        .catch(() => {});
    },
    settingIPChange() {
      this.dialogIPVisible = true;
    },
  },
};
</script>
